<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="c" width="600" height="400" style="border: 1px solid #ccc"></canvas>
        <video id="video" src="http://www.w3school.com.cn/i/movie.mp4" controls></video>
        <button id="btn">播放/暂停</button>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')

            var video = document.getElementById('video')
            console.log('video: ', video);

            let btn = document.getElementById('btn')
            btn.onclick = function () {
                if (video.paused) {
                    video.play()
                    render()
                } else {
                    video.pause()
                }
            }

            let img = new Image()
            img.src = '../image/fs.png'

            function render() {
                ctx.drawImage(video, 0, 0, 600, 400)
                ctx.fillText('zhangpp',100, 350)
                ctx.drawImage(img, 400, 350, 50, 50)
                requestAnimationFrame(render)
            }
        </script>
    </body>
</html>
